<template>
  <div class="main">
      <div class="device">
        <div class="dleft">
          <span style="font-weight:500">老人伴侣</span>
          <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
        </div>
        <div @click="toMain" class="dmid">
          <span><img align="absmiddle" style="width: 5vw" src="@svg/id.svg"/>&nbsp;ID: {{deviceData.ID}}</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/device.svg"/>&nbsp;当前心率: {{deviceData.BE}}b/Min</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/beat.svg"/>&nbsp;皮肤温度: {{deviceData.TC}}°C</span>     
        </div>
      </div>
  </div>
</template>

<script>
import mqtt from 'mqtt'
//import { Dialog } from 'vant';
//import { Toast } from 'vant';
var client1
const options = {
    connectTimeout: 40000,
    clean: true
  }
 client1 = mqtt.connect('ws://121.5.58.100:8083/mqtt', options)
export default {
  name: 'LRBL',
  props: {
    id:String
  },
  components :{
  },
  created: function() {
      this.mqttMsg()
  }, 
  data() {
    return {
      gpioc: '',
      modec: '',
      setAc: '',
      isLoad: false,
      checked: false,
      show:true,
      value: 0,
      send: '',
      param: '',
      flag: true,
      num: '',
      deviceData: {
        ID: this.id,
        BE:'--',
        TC:'--',
        TE:'--',
        HU:'--',
      },
    }
  },
  methods: {
    toMain() {
      console.log('to')
      this.$router.push({
        name: 'lrblMain',
        params: {
            routerType: 'push'
        }
      });
    },
    mqttMsg() {
      client1.on("connect", () => {
        console.log("连接成功！！！");
        client1.subscribe("LRBL/info", { qos: 0 }, (error) => {
          if (!error) {
            console.log("订阅成功");
          } else {
            console.log("订阅失败");
          }
        });
      });
      // 接收消息处理
      client1.on("message", (topic, message) => {
        console.log(message.toString()); //控制台显示接收到的数据
        this.res = JSON.parse(message.toString());
        this.deviceData.ID = this.res.ID;
        this.deviceData.BE = this.res.BE;
        this.deviceData.TC = this.res.TC.toFixed(2);
        })
    },
  }
}
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main{
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
}
.device {
  width: 85vw;
  height: 28vw;
  display: flex;
  justify-content:left;
  align-items:center;
  border-radius: 20px;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 10px 10px;
  background-color: white;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
